<template>
    <div>
        <a-modal
         v-model:visible="visible"
         :title="formState.id?formState.view?'查看'+formState.fzllx:'编辑'+formState.fzllx:'新增'+formState.fzllx"
         @ok="handleOk"
         @cancel="visible = false"
         class="dataManagement-add-edit-modal-Lu"
         width="90%"
         :footer="null"
        >
            <div v-if="visible">
                <a-tabs type="card">
                    <a-tab-pane key="study-1" tab="学习内容">
                        <a-form :form="form" layout="horizontal" class="add-edit-form">
                            <a-form-item label="标题">
                                <span v-if="formState.view">{{ formState.fbt }}</span>
                                <a-input
                                v-else
                                v-model:value="formState.fbt"
                                placeholder="请输入标题"
                                v-decorator="[
                                    'fbt', { initialValue:formState.fbt, rules: rules.fbt}
                                ]"/>
                            </a-form-item>
                            <a-form-item label="摘要">
                                <span v-if="formState.view">{{ formState.fzy }}</span>
                                <a-input
                                v-else
                                v-model:value="formState.fzy"
                                placeholder="请输入摘要"
                                v-decorator="[
                                    'fzy', { initialValue:formState.fzy, rules: rules.fzy}
                                ]"/>
                            </a-form-item>
                            <a-form-item label="资源来源">
                                <span v-if="formState.view">{{ formState.fzyly }}</span>
                                <a-input
                                v-else
                                v-model:value="formState.fzyly"
                                placeholder="请输入资源来源"
                                v-decorator="[
                                    'fzyly', { initialValue:formState.fzyly, rules: rules.fzyly}
                                ]"/>
                            </a-form-item>
                            <a-form-item label="发布人">
                                <span v-if="formState.view">{{ formState.ffbr }}</span>
                                <a-input
                                v-else
                                v-model:value="formState.ffbr"
                                placeholder="请输入发布人"
                                v-decorator="[
                                    'ffbr', { initialValue:formState.ffbr, rules: rules.ffbr}
                                ]"/>
                            </a-form-item>
                            <a-form-item label="学习链接">
                                <a v-if="formState.view" :href="formState.fbdlj" target="_blank">{{ formState.fbdlj }}</a>
                                <a-input
                                v-else
                                v-model:value="formState.fbdlj"
                                placeholder="请输入学习链接"/>
                            </a-form-item>
                            <a-form-item label="学习内容" class="flex-1-box">
                                <div v-if="formState.view" v-html="formState.ftznr"></div>
                                <quill-editor v-else v-model:value="formState.ftznr"></quill-editor>
                            </a-form-item>

                            <!-- <a-form-item label="发布时间">
                                <a-date-picker
                                v-model:value="formState.ffbsj"
                                placeholder="请选择发布时间"
                                v-decorator="[
                                    'ffbsj', { initialValue:formState.ffbsj, rules: rules.ffbsj}
                                ]"/>
                            </a-form-item> -->
                            <!-- <a-form-item label="发布状态">
                                <span v-if="formState.view">
                                    <span style="color: #5470c6;" v-if="formState.ffbzt == '草稿'">草稿</span>
                                    <span style="color: #91cc75;" v-if="formState.ffbzt == '已发布'">已发布</span>
                                    <span style="color: #ee6666;" v-if="formState.ffbzt == '已下架'">已下架</span>
                                </span>
                                <a-select
                                    v-else
                                    ref="select"
                                    placeholder="请选择发布状态"
                                    v-model:value="formState.ffbzt"
                                    v-decorator="[
                                        'ffbzt', { initialValue:formState.ffbzt, rules: rules.ffbzt}
                                    ]"
                                    >
                                    <a-select-option value="草稿">草稿</a-select-option>
                                    <a-select-option value="已发布">已发布</a-select-option>
                                    <a-select-option value="已下架">已下架</a-select-option>
                                </a-select>
                            </a-form-item> -->
                        </a-form>
                    </a-tab-pane>
                    <a-tab-pane key="study-2" tab="学习资料">
                        <a-form-item label="相关附件" class="flex-1-box">
                                <a-tabs type="card" @change="callback">
                                    <a-tab-pane v-for="(item,index) in tabList" :key="item.key" :tab="item.tabName">
                                    </a-tab-pane>
                                </a-tabs>
                                <div v-if="!formState.view">
                                    <a-upload :disabled="uploadLoading"
                                    v-if="formState.id"
                                    :beforeUpload="$event=>{return false}"
                                    :showUploadList="false"
                                    action=""
                                    @change="RelatedAccessoriesUploadSave">
                                        <a-button :loading="uploadLoading" style="margin-right: 15px;" class="blue-btn" type="primary" >上传</a-button>
                                    </a-upload>
                                    <a-button v-else style="margin-right: 15px;" class="blue-btn" type="primary" @click="onlyUploadSave">上传</a-button>
                                </div>
                                <div class="related-accesso-box">
                                    <div v-for="(item,index) in fjxxList" :key="index">
                                        <span style="font-weight: 600;">{{ item.fwjxsmc+item.fwjlx }}</span>
                                        <a-icon style="color: #ff8000;padding: 5px;font-size: 16px;" type="delete" @click="deleteClick(item)" v-if="!formState.view"/>
                                        <a-icon style="color: rgb(24, 144, 255);padding: 5px;font-size: 16px;" type="eye" @click="viewClick(item)" v-if="item.fwjlx == '.pdf'"/>
                                        <a-icon style="color: rgb(24, 144, 255);padding: 5px;font-size: 16px;" type="download" @click="downloadClick(item)"/>
                                    </div>
                                </div>
                            </a-form-item>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import {
    partyXxzlqueryXxzlFjList,
    partyXxzluploadFile,
    partyXxzldeleteFile,
    partyXxzldownFile,
 } from './service/index'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fbt: [{
                    required: true,
                    message: '请输入标题',
                    trigger: 'blur',
                }],
                fzy: [{
                    required: true,
                    message: '请输入摘要',
                    trigger: 'blur',
                }],
                fzyly: [{
                    required: true,
                    message: '请输入资源来源',
                    trigger: 'blur',
                }],
                ffbr: [{
                    required: true,
                    message: '请输入发布人',
                    trigger: 'blur',
                }],
                // ffbsj: [{
                //     required: true,
                //     message: '请选择发布时间',
                //     trigger: 'blur',
                // }],
                ffbzt: [{
                    required: true,
                    message: '请选择发布状态',
                    trigger: 'blur',
                }],
            },
            materialUnitList:[],
            uploadLoading:false,
            fjxxList:[],
            tabList: [
                {key: '1',tabName: 'pdf',type: 'pdf',listName: 'pdfList'},
                {key: '2',tabName: '视频',type: 'mp4',listName: 'videoList'},
                {key: '3',tabName: '音频',type: 'mp3',listName: 'mp3List'},
                {key: '4',tabName: 'ppt',type: 'ppt/pptx',listName: 'pptList'},
            ],
            fileType: {},
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        callback(val){
            this.fileType = {}
            //console.log('callback',val)
            this.tabList.forEach(item => {
                if(item.key == val){
                    this.fileType = item
                    this.getFile(this.formState)
                }
            })
        },
        getData(val){
            //console.log(val)
            this.formState = {}
            this.formState = val
            this.fjxxList = []
            if(val.id){
                this.getFile(val)
            }
            this.fileType = {}
            this.fileType = this.tabList[0]

        },
        onlyUploadSave(){
            if(!this.formState.id){
                this.form.validateFields((err, values) => {})
                this.$message.warning('请先保存当前学习内容数据')
            }

        },
        getFile(val){
            //console.log(val)
            partyXxzlqueryXxzlFjList({id:val.id}).then(res=>{
                if(res.code == 200){
                    let listName = this.fileType.listName
                    // //console.log('listName',listName)
                    let key = this.fileType.key
                    if(key == '1'){
                        this.fjxxList = res.result.pdfList
                    } else if (key == '2'){
                        this.fjxxList = res.result.videoList
                    }else if (key == '3'){
                        this.fjxxList = res.result.mp3List
                    }else if (key == '4'){
                        this.fjxxList = res.result.pptList
                    }
                    //console.log(this.fjxxList)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        //上传相关文件
        RelatedAccessoriesUploadSave({file}){
            //console.log(file,file.name.slice(file.name.lastIndexOf('.') + 1))
            let fileType = file.name.slice(file.name.lastIndexOf('.') + 1)
            let str = this.fileType.type
            if(str.indexOf(fileType) !== -1){
                this.uploadLoading = true
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("id",this.formState.id);
                partyXxzluploadFile(fileData).then(res => {
                    if(res.code){
                        if(res.code == 200){
                            this.uploadLoading = false
                            this.$message.success(res.message)
                        }else{
                            this.uploadLoading = false
                            this.$message.warning(res.message)
                        }

                    }
                    this.getFile(this.formState)
                })
            }else{
                this.$message.warning('请上传'+str+'文件')
            }

            // }
        },
        viewClick(val){
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/partyXxzl/downFile?id='+val.id
            )
            this.$emit('tableSearchEvent')
        },
        downloadClick(val){
            var that = this
            var fileName = val.fwjxsmc
            let param = {id:val.id}
            partyXxzldownFile(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }else{
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.$emit('tableSearchEvent')
                }
            })
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    partyXxzldeleteFile({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.getFile(that.formState)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },

            });
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values},val)
                    }

                }
            })
        },
    }
}
</script>
<style lang="less">
.dataManagement-add-edit-modal-Lu{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
    .ant-tabs.ant-tabs-card {
        .ant-tabs-tab {
            font-size: 16px;
        }
        .ant-tabs-bar .ant-tabs-tab-active {
            background: #5ca3e5 !important;
            border-color: #5ca3e5 !important;
            color: #fff;
            font-size: 16px;
        }
    }
    .ql-container {
        min-height: 300px !important;
        font-size: 16px !important;
    }
}
</style>
